<template>
  <div class="main">
    <el-col :span="4">
      <el-input placeholder="请输入姓名" v-model="name">
        <el-button type="primary" @click="willAdd">添加</el-button>
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </el-col>
    <el-button style="margin-left:20px" type="primary" @click="willAdd">添加</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="姓名" width="80"></el-table-column>
      <el-table-column prop="code" label="工号" width="80"></el-table-column>
      <el-table-column prop="age" label="年龄" width="50"></el-table-column>
      <el-table-column prop="gender" label="性别" width="50"></el-table-column>
      <el-table-column prop="birthday" label="生日" width="110"></el-table-column>
      <el-table-column prop="depart" width="100" label="部门"></el-table-column>
      <el-table-column prop="workDate" label="入职日期" width="110"></el-table-column>
      <el-table-column prop="status" label="状态" width="60"></el-table-column>
      <el-table-column prop="depart" width="100" label="所属店面"></el-table-column>
      <el-table-column prop="depart" width="100" label="招聘人员"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handleDelete(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageNation />
  </div>
</template>

<script>
import PageNation from "../../components/PageNation";
export default {
  components: {
    PageNation,
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex);
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "";
      }
    },
  },
  data() {
    return {
      tableData: [
        {
          code: "XS1115",
          name: "高邓",
          age: 28,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
        {
          code: "XS1116",
          name: "张云龙",
          age: 27,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
        {
          code: "XS1117",
          name: "杨景",
          age: 28,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
        {
          code: "XS1119",
          name: "杨延武",
          age: 26,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
        {
          code: "XS1120",
          name: "张三",
          age: 25,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "离职",
          onlineStatus: "在线",
        },
        {
          code: "XS1121",
          name: "李四",
          age: 24,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "请假",
          onlineStatus: "在线",
        },
        {
          code: "XS1122",
          name: "王五",
          age: 23,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
        {
          code: "XS1123",
          name: "赵六",
          age: 22,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
        {
          code: "XS1124",
          name: "孙七",
          age: 21,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
        {
          code: "XS1125",
          name: "刘亦菲",
          age: 20,
          gender: "男",
          birthday: "1993-01-16",
          depart: "销售部",
          post: "总经理",
          tel: "16637531877",
          workDate: "2021-04-13",
          status: "正常",
          onlineStatus: "在线",
        },
      ],
    };
  },
};
</script>

<style>
.el-table .warning-row {
  background: rgb(230, 250, 253);
}

.el-table .success-row {
  background: #f0f9eb;
}
input {
  width: 50px;
}
</style>